<template>
  <div class="lost-found-page">
    <!-- 复用头部导航和主导航栏 -->
    <div class="header-nav">
      <div class="header-left">
        <img src="./logo.png" alt="中国铁路12306" class="logo">
        <div class="search-box">
          <input type="text" placeholder="车票、餐饮、常旅客、相关规章" class="search-input">
          <button type="button" class="search-button">
            <i class="el-icon-search search-icon"></i>
          </button>
        </div>
      </div>
      <div class="header-right">
        <span class="nav-item">无障碍</span>
        <span class="divider">|</span>
        <span class="nav-item">敬老版</span>
        <span class="divider">|</span>
        <span class="nav-item">English</span>
        <span class="divider">|</span>
        <span class="nav-item">我的12306</span>
        <span class="divider">|</span>
        <router-link to="/login" class="nav-item">登录注册</router-link>
      </div>
    </div>

    <div class="sub-nav">
      <div class="sub-nav-wrapper">
        <router-link to="/" class="sub-nav-item">首页</router-link>
        <router-link to="/tickets" class="sub-nav-item">车票</router-link>
        <router-link to="/group" class="sub-nav-item">团购服务</router-link>
        <router-link to="/membership" class="sub-nav-item">会员服务</router-link>
        <router-link to="/station" class="sub-nav-item">站车服务</router-link>
        <router-link to="/business" class="sub-nav-item">商旅服务</router-link>
        <router-link to="/guide" class="sub-nav-item">出行指南</router-link>
        <router-link to="/query" class="sub-nav-item">信息查询</router-link>
      </div>
    </div>

    <!-- 遗失物品查找主体内容 -->
    <div class="main-content">
      <h2 class="page-title">遗失物品查找</h2>
      
      <!-- 搜索表单 -->
      <div class="search-form">
        <form @submit.prevent="handleSearch">
          <div class="form-group">
            <label>乘车日期：</label>
            <input type="date" v-model="searchForm.boardDate" required>
          </div>
          <div class="form-group">
            <label>车次：</label>
            <input type="text" v-model="searchForm.trainNo" required>
          </div>
          <div class="form-group">
            <label>旅客姓名：</label>
            <input type="text" v-model="searchForm.passengerName" required>
          </div>
          <button type="submit" class="search-btn">开始查询</button>
        </form>
      </div>

      <!-- 结果列表 -->
      <div v-if="lostItems.length > 0" class="result-list">
        <table class="list-table">
          <thead>
            <tr>
              <th>工单编号</th>
              <th>提交日期</th>
              <th>遗失物品</th>
              <th>查找状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in lostItems" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{ item.createTime }}</td>
              <td>{{ item.itemContent }}</td>
              <td>{{ item.status }}</td>
              <td>
                <button @click="viewDetails(item)">详情</button>
                <button v-if="item.editable" @click="editItem(item)">修改</button>
                <button v-if="item.cancelable" @click="cancelItem(item)">取消</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 空结果提示 -->
      <div v-else class="empty-tip">暂无符合条件的遗失物品记录</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router'; // 引入路由钩子

// 模拟数据（实际需替换为API请求）
const lostItems = ref([
  {
    id: '20250610001',
    createTime: '2025-06-10',
    itemContent: '黑色背包（含笔记本电脑）',
    status: '处理中',
    editable: true,
    cancelable: true
  },
  {
    id: '20250609002',
    createTime: '2025-06-09',
    itemContent: '红色行李箱',
    status: '已找回',
    editable: false,
    cancelable: false
  }
]);

const searchForm = reactive({
  boardDate: '',
  trainNo: '',
  passengerName: ''
});

const router = useRouter(); // 获取路由实例

// 搜索功能（模拟）
const handleSearch = () => {
  // 实际开发中此处应调用后端API
  console.log('搜索参数:', searchForm);
};

// 详情页跳转
const viewDetails = (item) => {
  router.push(`/lost-found/detail/${item.id}`); // 示例详情页路由
};

// 修改和取消功能（示例）
const editItem = (item) => {
  console.log('编辑工单:', item);
};

const cancelItem = (item) => {
  console.log('取消工单:', item);
};
</script>

<style scoped>
/* 复用投诉页面的公共样式，新增差异化样式 */
.lost-found-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
}

.page-title {
  font-size: 24px;
  color: #003366;
  margin-bottom: 20px;
  border-bottom: 2px solid #003366;
  padding-bottom: 5px;
}

.search-form {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.search-btn {
  background-color: #007bff;
  color: white;
  padding: 10px 30px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

.list-table {
  width: 100%;
  border-collapse: collapse;
}

.list-table th,
.list-table td {
  padding: 12px;
  border: 1px solid #e5e7eb;
  text-align: left;
}

.list-table th {
  background-color: #f0f0f0;
  color: #003366;
  font-weight: 500;
}

.empty-tip {
  text-align: center;
  color: #999;
  margin-top: 20px;
}
</style>